import { useState } from 'react';
import React from 'react';
import { render } from 'react-dom';
import { Card ,Avatar,Progress,Button  } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import Header from '@/components/header';

const Home: React.FC = () => {
  return (
    <div className="h-full">
      <div className="h-full ">
        <Header></Header>
        <Card
        title="欢迎使用"
        className="mt-[30px]"
        extra={<a href="#">学习</a>}
        style={{ width: '80%', margin: '30px auto' }}
        cover={
          <div style={{'display':'flex'}} className='flex px-3 my-2'>
            <Avatar shape="square" src="/src/assets/book.png" size={64} icon={<UserOutlined />} />
            <div className='flex-1 mx-2'>
              <div className='font-semibold'>日语词汇大全</div>
              <Progress percent={20} showInfo={false} />
              <div>200/1000</div>
            </div>
          </div>
          
        }
      >
        <h3 className='font-extrabold text-xl'>
          今日计划
        </h3>
        <div className='flex'>
          <div className='w-1/2'>
            <h4 className='font-bold'>需新学</h4>
            <span className='font-bold text-4xl italic'>10</span><span className='font-semibold ml-2'>词</span>
          </div>
          <div className='w-1/2'>
            <h4 className='font-bold'>总量</h4>
            <span className='font-bold text-4xl italic'>100</span><span className='font-semibold ml-2'>词</span>
          </div>
        </div>
        <Button type="primary" className='w-full mt-5'>开始背单词</Button>
        </Card>
      </div>
     
    </div>
  );
};

export default Home;
